<template>
  <div>
    <div class="tableWrapper" style="margin-top: 0; margin-bottom: 16px">
      <div class="operations">
        <px-button v-has="'CONSUMABLES_WATER_HISTORY'" type="primary" @click="viewConsumablesInfoHandler">耗材记录</px-button>
        <px-button v-if="btnstatus" v-has="'CONSUMABLES_WATER_RATED'" type="primary" plain @click="changeConsumablesHandler"
          >用额定寿命计算</px-button
        >
        <px-button v-if="!btnstatus" v-has="'CONSUMABLES_WATER_PREDICTION'" type="primary" plain @click="calculateHandler">用预测寿命计算</px-button>
      </div>
      <px-scrollbar>
        <px-table
          :data="gettableData(tableData)"
          class="inspection-table"
          size="small"
          height="151px"
          border
          :header-cell-class-name="tableHeaderColor"
          @selection-change="handleSelectionChangeHandler"
        >
          <!-- <px-table-column type="selection" width="55" align="center" /> -->
          <px-table-column label="系统" prop="ffuGroup" align="center" show-overflow-tooltip />
          <px-table-column label="设备名称" prop="ffuName" align="center" show-overflow-tooltip />
          <px-table-column label="耗材名称" prop="filterType" align="center" show-overflow-tooltip />
          <px-table-column label="开始使用日期" prop="filterInstallDate" align="center" show-overflow-tooltip />
          <px-table-column label="额定寿命(天)" prop="lifecycle_exp" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.lifeTimeAdjusted" style="color: #ef4444">{{ scope.row.lifecycle_exp }}</span>
              <span v-else>{{ scope.row.lifecycle_exp }}</span>
            </template>
          </px-table-column>
          <px-table-column label="预测寿命(天)" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.lifecycle_predict > 0 ? scope.row.lifecycle_predict : "-" }}天</span>
            </template>
          </px-table-column>
          <px-table-column label="已经天数" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span>已经使用{{ scope.row.daysUsed }}天</span>
            </template>
          </px-table-column>
          <px-table-column
            :label="btnstatus ? '根据预测寿命计算' : '根据额定寿命计算'"
            prop="responsiblePerson"
            width="400"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div class="progressWrapper">
                <px-progress
                  class="progress"
                  :stroke-width="10"
                  :color="'#10b981'"
                  :percentage="scope.row.ratioUsed == 0 ? 0 : scope.row.ratioUsed.toFixed(2) < 0 ? 0 : scope.row.ratioUsed.toFixed(2)"
                />
              </div>
            </template>
          </px-table-column>
          <px-table-column label="剩余天数" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span :class="'label__' + scope.row.statusClassSuffix">剩余{{ btnstatus ? scope.row.daysLeft2 : scope.row.daysLeft }}天</span>
            </template>
          </px-table-column>
          <px-table-column label="状态" prop="responsiblePerson" align="center" show-overflow-tooltip>
            <template #default="scope">
              <text :class="'status__' + scope.row.statusClassSuffix">{{ scope.row.status }}</text>
            </template>
          </px-table-column>
          <px-table-column label="下次更换日期" prop="filterNextInstallDate_AI" align="center" show-overflow-tooltip />
          <px-table-column label="操作" width="144" prop="responsiblePerson" align="center" show-overflow-tooltip>
            <template #default="scope">
              <div class="tableOperations">
                <px-tooltip class="box-item" content="更换耗材" placement="top">
                  <waterSwitch v-has="'CONSUMABLES_WATER_CHANGE'" class="content-icon" @click="routerToChangeHanlder(scope.row)" />
                </px-tooltip>
                <px-button v-has="'CONSUMABLES_WATER_EDITOR'" link type="primary" @click="handleEditor(scope.row)">
                  <px-tooltip class="box-item" content="调整" placement="top">
                    <px-icon size="16">
                      <EditPen />
                    </px-icon> </px-tooltip
                ></px-button>
                <px-tooltip class="box-item" content="耗材记录" placement="top">
                  <waterTime v-has="'CONSUMABLES_WATER_CHANGEHISTORY'" class="content-icon" @click="routerToHistoryHanlder(scope.row)" />
                </px-tooltip>
                <px-tooltip class="box-item" content="工单记录" placement="top">
                  <waterStore v-has="'CONSUMABLES_WATER_WORKHISTORY'" class="content-icon" @click="routerToWorkOrderRecord(scope.row)" />
                </px-tooltip>
              </div>
            </template>
          </px-table-column>
        </px-table>
      </px-scrollbar>
    </div>
    <!-- @wheel.prevent="onWheel"
        @mousedown.prevent="startDrag" -->
    <div style="position: relative">
      <px-radio-group v-model="filterradio" style="position: absolute; top: 15px; left: calc(50% - 100px); z-index: 99">
        <px-radio-button label="FP-217" />
        <px-radio-button label="FP-513" />
        <px-radio-button label="FP-605" />
      </px-radio-group>
      <div v-if="filterradio == 'FP-217'" style="overflow: hidden">
        <px-scrollbar ref="parentRef" class="waterdom borderRidus boxShadow" style="position: relative; overflow: auto" @wheel.prevent="onWheel">
          <modelTitle title="压滤机FP-217详情" />
          <div ref="draggableRef" class="rodetail draggable" :style="{ scale: scale, top: `${position.y}px`, left: `${position.x}px` }">
            <img class="roimg" src="@/assets/images/water/fp217.png" />

            <p class="roname name1">FP-217A</p>
            <p class="roname name2">FP-217B</p>
            <p class="titlep1">进水</p>
            <p class="titlep2">出水</p>
            <p class="titlep3">污泥去向</p>
            <!-- <p class="rotitle title1">进水</p>
            <p class="rotitle title2">出水</p> -->
            <div class="statusdom1">
              <div v-for="item in ROlist1" :key="item" class="statusdomlist">
                <img v-if="FP217?.status == '正常'" class="statusdomlistimg" src="@/assets/images/water/status1.png" />
                <p v-if="FP217?.status == '正常'" class="statusdomlistp1">正常</p>
                <img v-if="FP217?.status == '临期'" class="statusdomlistimg" src="@/assets/images/water/status2.png" />
                <p v-if="FP217?.status == '临期'" class="statusdomlistp1 statusdomlistcolor2">临期</p>
                <img v-if="FP217?.status == '失效'" class="statusdomlistimg" src="@/assets/images/water/status3.png" />
                <p v-if="FP217?.status == '失效'" class="statusdomlistp1">失效</p>
                <p v-if="FP217?.status == '正常'" class="statusdomlistp2 statusdomliststatuscolor1">
                  剩余：<span class="statusdomlistspan">{{ FP217?.lifecycle_exp_left }}天</span>
                </p>
                <p v-else class="statusdomlistp2 statusdomliststatuscolor2">
                  剩余：<span class="statusdomlistspan">{{ FP217?.lifecycle_exp_left }}天</span>
                </p>
              </div>
            </div>
            <div class="statusdom2">
              <div v-for="item in ROlist1" :key="item" class="statusdomlist">
                <img v-if="FP217?.status == '正常'" class="statusdomlistimg" src="@/assets/images/water/status1.png" />
                <p v-if="FP217?.status == '正常'" class="statusdomlistp1">正常</p>
                <img v-if="FP217?.status == '临期'" class="statusdomlistimg" src="@/assets/images/water/status2.png" />
                <p v-if="FP217?.status == '临期'" class="statusdomlistp1 statusdomlistcolor2">临期</p>
                <img v-if="FP217?.status == '失效'" class="statusdomlistimg" src="@/assets/images/water/status3.png" />
                <p v-if="FP217?.status == '失效'" class="statusdomlistp1">失效</p>
                <p v-if="FP217?.status == '正常'" class="statusdomlistp2 statusdomliststatuscolor1">
                  剩余：<span class="statusdomlistspan">{{ FP217?.lifecycle_exp_left }}天</span>
                </p>
                <p v-else class="statusdomlistp2 statusdomliststatuscolor2">
                  剩余：<span class="statusdomlistspan">{{ FP217?.lifecycle_exp_left }}天</span>
                </p>
              </div>
            </div>
            <div class="numDom num1-1" data-code="STIC_FAB_UPW_CIA_302_ACT">
              <p class="titlep">污泥含水率</p>
              <!-- <p>{{ indicators.STIC_FAB_UPW_CIA_302_ACT.label }}</p> -->
              <p>暂无</p>
            </div>
          </div>
        </px-scrollbar>
      </div>
      <div v-if="filterradio == 'FP-513'" style="overflow: hidden">
        <px-scrollbar ref="parentRef" class="waterdom borderRidus boxShadow" style="position: relative; overflow: auto" @wheel.prevent="onWheel">
          <modelTitle title="压滤机FP-513详情" />
          <div ref="draggableRef" class="rodetail draggable" :style="{ scale: scale, top: `${position.y}px`, left: `${position.x}px` }">
            <img class="roimg2" src="@/assets/images/water/fp513.png" />
            <div class="numDom2 num1-11" data-code="STIC_FAB_UPW_CIA_302_ACT">
              <p class="titlep">污泥含水率</p>
              <!-- <p>{{ indicators.STIC_FAB_UPW_CIA_302_ACT.label }}</p> -->
              <p>暂无</p>
            </div>

            <p class="roname name11">FP-513</p>
            <p class="titlep11">进水</p>
            <p class="titlep22">出水</p>
            <p class="titlep33">污泥去向</p>
            <div class="statusdom11">
              <div v-for="item in ROlist1" :key="item" class="statusdomlist">
                <img v-if="FP513?.status == '正常'" class="statusdomlistimg" src="@/assets/images/water/status1.png" />
                <p v-if="FP513?.status == '正常'" class="statusdomlistp1">正常</p>
                <img v-if="FP513?.status == '临期'" class="statusdomlistimg" src="@/assets/images/water/status2.png" />
                <p v-if="FP513?.status == '临期'" class="statusdomlistp1 statusdomlistcolor2">临期</p>
                <img v-if="FP513?.status == '失效'" class="statusdomlistimg" src="@/assets/images/water/status3.png" />
                <p v-if="FP513?.status == '失效'" class="statusdomlistp1">失效</p>
                <p v-if="FP513?.status == '正常'" class="statusdomlistp2 statusdomliststatuscolor1">
                  剩余：<span class="statusdomlistspan">{{ FP513?.lifecycle_exp_left }}天</span>
                </p>
                <p v-else class="statusdomlistp2 statusdomliststatuscolor2">
                  剩余：<span class="statusdomlistspan">{{ FP513?.lifecycle_exp_left }}天</span>
                </p>
              </div>
            </div>
          </div>
        </px-scrollbar>
      </div>
      <div v-if="filterradio == 'FP-605'" style="overflow: hidden">
        <px-scrollbar ref="parentRef" class="waterdom borderRidus boxShadow" style="position: relative; overflow: auto" @wheel.prevent="onWheel">
          <modelTitle title="压滤机FP-605详情" />
          <div ref="draggableRef" class="rodetail draggable" :style="{ scale: scale, top: `${position.y}px`, left: `${position.x}px` }">
            <img class="roimg" src="@/assets/images/water/fp605.png" />
            <div class="numDom2 num1-111" data-code="STIC_FAB_UPW_CIA_302_ACT">
              <p class="titlep">污泥含水率</p>
              <!-- <p>{{ indicators.STIC_FAB_UPW_CIA_302_ACT.label }}</p> -->
              <p>暂无</p>
            </div>

            <p class="roname name111">FP-605</p>
            <p class="titlep111">进水</p>
            <p class="titlep222">出水</p>
            <p class="titlep333">污泥去向</p>
            <div class="statusdom111">
              <div v-for="item in ROlist1" :key="item" class="statusdomlist">
                <img v-if="FP605?.status == '正常'" class="statusdomlistimg" src="@/assets/images/water/status1.png" />
                <p v-if="FP605?.status == '正常'" class="statusdomlistp1">正常</p>
                <img v-if="FP605?.status == '临期'" class="statusdomlistimg" src="@/assets/images/water/status2.png" />
                <p v-if="FP605?.status == '临期'" class="statusdomlistp1 statusdomlistcolor2">临期</p>
                <img v-if="FP605?.status == '失效'" class="statusdomlistimg" src="@/assets/images/water/status3.png" />
                <p v-if="FP605?.status == '失效'" class="statusdomlistp1">失效</p>
                <p v-if="FP605?.status == '正常'" class="statusdomlistp2 statusdomliststatuscolor1">
                  剩余：<span class="statusdomlistspan">{{ FP605?.lifecycle_exp_left }}天</span>
                </p>
                <p v-else class="statusdomlistp2 statusdomliststatuscolor2">
                  剩余：<span class="statusdomlistspan">{{ FP605?.lifecycle_exp_left }}天</span>
                </p>
              </div>
            </div>
          </div>
        </px-scrollbar>
      </div>
    </div>

    <associationAnalysis ref="spcDialogRef" :jobIdList="jobIdList" />
    <edtiorNum v-if="editorShow" :classcode="classcode" :row="editorRow" @close="editorclose" />
  </div>
</template>

<script setup lang="ts">
import { querySpecRealTimeValue, queryWaterConsumableListAll } from "@/api/waterConsumable";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { Plus, Minus } from "@px-ui/icons-vue";
import { ref, toRefs, reactive, onMounted, computed, watch, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { PxMessage } from "px-ui";
import waterSwitch from "@/assets/svg/water/waterSwitch.svg?component";
import waterStore from "@/assets/svg/water/waterStore.svg?component";
import waterTime from "@/assets/svg/water/waterTime.svg?component";
import { getToken } from "@/utils/auth";
import associationAnalysis from "./associationAnalysis.vue";
import { Console } from "node:console";
import { status } from "@/utils/constant";
import edtiorNum from "./edtiorNum.vue";
const classcode = "WATER";
const editorShow = ref(false);
const editorRow = ref({});
const handleEditor = row => {
  console.log(row);
  editorRow.value = row;
  editorShow.value = true;
};
const editorclose = val => {
  editorShow.value = val;
  queryListAll();
};
const remainAmount = ref<string | number>("-");
const parentRef = ref(null);
const draggableRef = ref(null);
const position = ref({ x: 0, y: 0 });
const scale = ref(1.0);
const zoomStep = 0.1;
let dragging = false;
let initialMousePos = { x: 0, y: 0 };
let initialElementPos = { x: 0, y: 0 };
let initialScale = 1.0;
const gettableData = data => {
  if (filterradio.value == "FP-217") {
    return data.filter(item => item.ffuCode.includes("217"));
  }
  if (filterradio.value == "FP-513") {
    return data.filter(item => item.ffuCode.includes("513"));
  }
  if (filterradio.value == "FP-605") {
    return data.filter(item => item.ffuCode.includes("605"));
  }
};
const startDrag = event => {
  dragging = true;
  initialMousePos = { x: event.clientX, y: event.clientY };
  const draggableElement = draggableRef.value;
  const rect = draggableElement.getBoundingClientRect();
  initialElementPos = {
    x: position.value.x - (rect.left - draggableElement.offsetLeft),
    y: position.value.y - (rect.top - draggableElement.offsetTop)
  };
  // 由于我们使用了 getBoundingClientRect，这里 offsetLeft 和 offsetTop 应该是 0，但为了保险起见还是保留
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
};

const onMouseMove = event => {
  if (dragging) {
    const deltaX = event.clientX - initialMousePos.x;
    const deltaY = event.clientY - initialMousePos.y;
    position.value = {
      x: initialElementPos.x + deltaX / initialScale, // 除以当前缩放比例以保持拖拽位置正确
      y: initialElementPos.y + deltaY / initialScale
    };
  }
};

const onMouseUp = () => {
  dragging = false;
  initialScale = scale.value; // 更新初始缩放比例以便下次拖拽时使用
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
};

const onWheel = event => {
  event.preventDefault();
  if (event.deltaY < 0) {
    scale.value = scale.value + 0.1;
  } else {
    scale.value = scale.value - 0.1;
  }
  // 限制缩放比例范围
  scale.value = Math.min(Math.max(scale.value, 0.1), 2.0);
  // 更新 initialScale 以保持拖拽位置正确
  initialScale = scale.value;
};
onUnmounted(() => {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
});
const filterradio = ref("FP-217");
const tableData = ref([]);
const selectIds = ref([]);
const btnstatus = ref(false);
const times = ref("");
const jobIdList = ref([]);
const FP217 = ref({ status: "", lifecycle_exp_left: "" });
const FP513 = ref({ status: "", lifecycle_exp_left: "" });
const FP605 = ref({ status: "", lifecycle_exp_left: "" });
const ROlist1 = ref([1]);
const ROlist2 = ref([1]);
const spcDialogRef = ref<HTMLDivElement>();

const checkTime = () => {
  console.log("times", times.value);
  // getTendency(times.value[0], times.value[1]);
};

enum TableTab {
  MoreConsumable, //更多耗材
  ConsumableHistoryLog, // 耗材记录
  CalculateByRatedLife // 使用额定寿命计算
}

const tableTabChecked = ref<TableTab>(TableTab.MoreConsumable);

const isTab0 = computed(() => TableTab.MoreConsumable === tableTabChecked.value);
const isTab1 = computed(() => TableTab.ConsumableHistoryLog === tableTabChecked.value);
const isTab2 = computed(() => TableTab.CalculateByRatedLife === tableTabChecked.value);

const indicators = reactive<Record<string, any>>({
  STIC_FAB_UPW_DOIT_405_ACT: { specValue: "", unit: "", label: "-" }, // 出水溶氧DOIT-405
  STIC_FAB_UPW_DOIT_504_ACT: { specValue: "", unit: "", label: "-" } // 出水溶氧DOIT-504
});

const router = useRouter();

/**更换耗材 */
const routerToChangeHanlder = (row: any) => {
  console.log("row", row);
  router.push({
    path: "/all/equip/epm/plan/list",
    query: {
      fullpath: `/pmPlan/list?pmType=UNS&isAdd=true&ssoToken=${getToken().accessToken || ""}&isHiddenMenu=true&eqpId=${row.ffuId}&ruleCode=${row.ffuCode}&className=WATER&subType=REF_TEMPLATE&facCode=${localStorage.getItem("facCode")}`
    }
  });
};

/**跳转到耗材记录 */
const routerToHistoryHanlder = (row: any) => {
  router.push({ path: "/water/waterConsumable/history", query: { eqpId: row.ffuCode, filterType: row.filterType } });
};

/**用额定寿命计算 */
const routerToWorkOrderRecord = (row: any) => {
  console.log("row", row);
  router.push({
    path: "/all/equip/epm/task/list",
    query: {
      fullpath: `/pmJob/list?pmType=${row.ffuCode}&ssoToken=${getToken().accessToken || ""}&isHiddenMenu=true&eqpId=${row.ffuId}&ruleCode=${row.ffuCode}`
    }
  });
};

const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
  return "bg0";
};

const bigimg = () => {
  if (scale.value < 1) {
    scale.value = scale.value + 0.1;
  }
};
const smailimg = () => {
  if (scale.value > 0.4) {
    scale.value = scale.value - 0.1;
  }
};

const changeConsumablesHandler = () => {
  btnstatus.value = false;
  tableTabChecked.value = TableTab.MoreConsumable;
  console.log("更换耗材");
};

const viewConsumablesInfoHandler = () => {
  tableTabChecked.value = TableTab.ConsumableHistoryLog;
  console.log("查询耗材记录");
  router.push({ path: "/water/waterConsumable/history", query: { devType: "FP" } });
};

const calculateHandler = () => {
  btnstatus.value = true;
  tableTabChecked.value = TableTab.CalculateByRatedLife;
  console.log("用额定寿命计算");
};

/** 多选框选中数据 */
const handleSelectionChangeHandler = (val: any) => {
  selectIds.value = [];
  val.forEach((item: any) => {
    if (item.eqpId) {
      selectIds.value.push(item.eqpId);
    }
  });
};

const getStatusByItem = (tabItem: any) => {
  if (isTab0.value) {
    if (!tabItem.outdated && !tabItem.invalid) {
      return "正常";
    } else if (tabItem.invalid) {
      return "失效";
    } else if (tabItem.outdated) {
      return "临期";
    }
  } else if (isTab2.value) {
    if (!tabItem.outdated_AI && !tabItem.invalid_AI) {
      return "正常";
    } else if (tabItem.invalid_AI) {
      return "失效";
    } else if (tabItem.outdated_AI) {
      return "临期";
    }
  }
};

const getStatusClassByItem = (tabItem: any) => {
  if (isTab0.value) {
    if (!tabItem.outdated && !tabItem.invalid) {
      return "success";
    } else if (tabItem.invalid) {
      return "invalid";
    } else if (tabItem.outdated) {
      return "outdated";
    }
  } else if (isTab2.value) {
    if (!tabItem.outdated_AI && !tabItem.invalid_AI) {
      return "success";
    } else if (tabItem.invalid_AI) {
      return "invalid";
    } else if (tabItem.outdated_AI) {
      return "outdated";
    }
  }
};

/**
 * 查询水科耗材的逻辑
 */
const queryWaterConsumables = async () => {
  // const resData = await queryListOutdatedFilter({
  //   devType: 'RO',
  //   pageNum: 1,
  //   pageSize: 100
  // }) as any
  // const filterStorageByTypeName = resData.filterStorageByTypeName
  // remainAmount.value = filterStorageByTypeName[RO_KEY] || '-'
  // tableData.value = resData.ffuList.map(item => {
  //   const targetTabItem = item.filters[0]
  //   if (item.filters && targetTabItem) {
  //     return {
  //       ...targetTabItem,
  //       ffuName: item.ffuName,
  //       daysUsed: targetTabItem.lifecycle_exp - targetTabItem.lifecycle_exp_left, // 已使用多少天
  //       daysLeft: targetTabItem.lifecycle_exp_left, // 剩余天数
  //       ratioUsed: ((targetTabItem.lifecycle_exp - targetTabItem.lifecycle_exp_left) / targetTabItem.lifecycle_exp) * 100,
  //       status: getStatusByItem(targetTabItem),
  //       statusClassSuffix: getStatusClassByItem(targetTabItem),
  //     }
  //   }
  //   return []
  // })
  // console.log('tableData.value', tableData.value)
};

/**
 * 查询其他指标的接口
 */
const queryOtherIndicators = async () => {
  const resData = await querySpecRealTimeValue({ pidCode: "WATER_CONSUMABLE_MDG", onlyNumberPoint: false });

  console.log("indicators before", resData);

  const indicatorKeys = Array.from(Object.keys(resData));

  if (resData && !!indicatorKeys.length) {
    indicatorKeys.forEach(indicatorKey => {
      const indicatorItem = resData[indicatorKey];
      if (indicatorItem.specValue) {
        if (indicatorItem.specValue !== "-") {
          indicatorItem.specValue = Number(indicatorItem.specValue).toFixed(2);
        }
      }
      indicators[indicatorKey] = { ...indicatorItem, label: `${indicatorItem.specValue} ${indicatorItem.unit}` };
      // 扩展展示的内容
    });
  }

  console.log("indicators", indicators);
};
const f204A = ref({ status: "", lifecycle_exp_left: "" });
const f204B = ref({ status: "", lifecycle_exp_left: "" });
const f204C = ref({ status: "", lifecycle_exp_left: "" });
const f302A = ref({ status: "", lifecycle_exp_left: "" });
const f302B = ref({ status: "", lifecycle_exp_left: "" });
const f302C = ref({ status: "", lifecycle_exp_left: "" });
const f405A = ref({ status: "", lifecycle_exp_left: "" });
const f405B = ref({ status: "", lifecycle_exp_left: "" });
const queryListAll = async () => {
  const resData = (await queryWaterConsumableListAll({ devType: "FP", pageNum: 1, pageSize: 100 })) as any;

  tableData.value = resData.ffuList.map(item => {
    const targetTabItem = item.filters[0];
    // if (item.filters && targetTabItem) {

    // }
    // return [];
    return {
      ...targetTabItem,
      ffuCode: item.ffuCode,
      ffuId: item.ffuId,
      ffuName: item.ffuName,
      lifecycle_exp_left: btnstatus.value
        ? targetTabItem.lifecycle_predict - targetTabItem.lifecycle_act > 0
          ? targetTabItem.lifecycle_predict - targetTabItem.lifecycle_act
          : 0
        : targetTabItem.lifecycle_exp - targetTabItem.lifecycle_act > 0
          ? targetTabItem.lifecycle_exp - targetTabItem.lifecycle_act
          : 0,
      daysUsed: targetTabItem.lifecycle_act, // 已使用多少天
      daysLeft: targetTabItem.lifecycle_exp - targetTabItem.lifecycle_act > 0 ? targetTabItem.lifecycle_exp - targetTabItem.lifecycle_act : 0, // 剩余天数
      daysLeft2:
        targetTabItem.lifecycle_predict - targetTabItem.lifecycle_act > 0 ? targetTabItem.lifecycle_predict - targetTabItem.lifecycle_act : 0,
      ratioUsed: btnstatus.value
        ? ((targetTabItem.lifecycle_act > 0 ? targetTabItem.lifecycle_act : 0) / targetTabItem.lifecycle_predict) * 100
        : (targetTabItem.lifecycle_act / targetTabItem.lifecycle_exp) * 100,
      status: getStatusByItem(targetTabItem),
      statusClassSuffix: getStatusClassByItem(targetTabItem)
    };
  });
  setTimeout(() => {
    FP217.value = tableData.value.filter(item => item.ffuCode == "FP-217")[0];
    FP513.value = tableData.value.filter(item => item.ffuCode == "FP-513")[0];
    FP605.value = tableData.value.filter(item => item.ffuCode == "FP-605")[0];
  }, 500);

  console.log("roList", resData);
};

watch(
  () => tableTabChecked.value,
  async tableTabChecked => {
    if ([TableTab.MoreConsumable, TableTab.CalculateByRatedLife].includes(tableTabChecked)) {
      await queryListAll();
    }
  }
);

const showSpc = specCode => {
  jobIdList.value = [indicators[specCode]];
  // console.log();
  spcDialogRef.value.handleOpen();
};

onMounted(async () => {
  try {
    await queryOtherIndicators(); // 查询其他指标的接口 (蓝色框)
    await queryWaterConsumables(); // 查询水科耗材的逻辑
    await queryListAll();
  } catch (e) {
    PxMessage.error(e.message);
  }
});
</script>

<style scoped lang="scss">
.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.rodetail {
  position: relative;
  width: 1533px;
  min-width: 1533px;
  height: 460px;
  margin: 0 auto;
  transform-origin: 50% 0%;
}

.roimg {
  position: absolute;
  top: 40px;
  left: 280px;
  width: 1000px;
}

.roimg2 {
  position: absolute;
  top: 40px;
  left: 280px;
  width: 1000px;
}

.numDom {
  position: absolute;
  top: 162px;
  left: 114px;
  width: 119px;
  height: 58px;
  font-size: 16px;
  cursor: pointer;

  p {
    width: 100%;
    height: 50%;
    line-height: 29px;
    color: white;
    text-align: center;
  }
}

.titlep1 {
  position: absolute;
  top: 138px;
  left: 295px;
  color: #3d3d3d;
}

.titlep2 {
  position: absolute;
  top: 140px;
  left: 1234px;
  color: #3d3d3d;
}

.titlep3 {
  position: absolute;
  top: 355px;
  left: 746px;
  color: #3d3d3d;
}

.titlep11 {
  position: absolute;
  top: 59px;
  left: 293px;
  color: #3d3d3d;
}

.titlep22 {
  position: absolute;
  top: 60px;
  left: 1234px;
  color: #3d3d3d;
}

.titlep33 {
  position: absolute;
  top: 233px;
  left: 726px;
  color: #3d3d3d;
}

.titlep111 {
  position: absolute;
  top: 59px;
  left: 293px;
  color: #3d3d3d;
}

.titlep222 {
  position: absolute;
  top: 60px;
  left: 1234px;
  color: #3d3d3d;
}

.titlep333 {
  position: absolute;
  top: 233px;
  left: 726px;
  color: #3d3d3d;
}

.num1-1 {
  top: 276px;
  left: 804px;
}

.num1-2 {
  left: 575px;
}

.num1-3 {
  left: 1035px;
}

.num2-1 {
  top: 225px;
  left: 368px;
}

.num2-2 {
  top: 225px;
  left: 833px;
}

.num2-3 {
  top: 225px;
  left: 1295px;
}

.numDom2 {
  position: absolute;
  top: 257px;
  left: 114px;
  width: 107px;
  height: 47px;
  font-size: 12px;
  cursor: pointer;

  p {
    width: 100%;
    height: 50%;
    line-height: 29px;
    color: white;
    text-align: center;
  }

  .titlep {
    font-size: 12px;
  }
}

.num1-11 {
  top: 160px;
  left: 788px;
}

.num1-22 {
  top: 312px;
  left: 186px;
}

.num1-33 {
  top: 257px;
  left: 642px;
}

.num1-44 {
  top: 312px;
  left: 642px;
}

.num1-55 {
  top: 83px;
  left: 1412px;
}

.num1-66 {
  top: 146px;
  left: 1412px;
}

.num2-11 {
  top: 74px;
  left: 590px;
}

.num2-22 {
  top: 74px;
  left: 1034px;
}

.num2-33 {
  top: 42px;
  left: 1334px;
}

.num1-111 {
  top: 160px;
  left: 788px;
}

.num1-222 {
  top: 166px;
  left: 244px;
  width: 120px;
}

.num1-333 {
  top: 40px;
  left: 1271px;
}

.num2-111 {
  top: 245px;
  left: 594px;
}

.num2-222 {
  top: 245px;
  left: 1051px;
}

.num2-333 {
  top: 122px;
  left: 1267px;
}

.statusdom1 {
  position: absolute;
  top: 63px;
  left: 841px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom2 {
  position: absolute;
  top: 172px;
  left: 841px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom3 {
  position: absolute;
  top: 181px;
  left: 724px;
  width: 235px;
  height: 23px;
}

.statusdom4 {
  position: absolute;
  top: 181px;
  left: 913px;
  width: 235px;
  height: 23px;
}

.statusdom5 {
  position: absolute;
  top: 181px;
  left: 1101px;
  width: 235px;
  height: 23px;
}

.statusdom11 {
  position: absolute;
  top: 63px;
  left: 829px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom22 {
  position: absolute;
  top: 190px;
  left: 373px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom33 {
  position: absolute;
  top: 190px;
  left: 493px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom44 {
  position: absolute;
  top: 190px;
  left: 699px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom55 {
  position: absolute;
  top: 190px;
  left: 819px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom66 {
  position: absolute;
  top: 190px;
  left: 939px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom111 {
  position: absolute;
  top: 63px;
  left: 829px;
  width: 235px;
  height: 23px;

  .statusdomlistp2 {
    position: absolute;
    top: 24px;
    left: 52px;
  }
}

.statusdom222 {
  position: absolute;
  top: 179px;
  left: 486px;
  width: 235px;
  height: 23px;
}

.statusdom333 {
  position: absolute;
  top: 181px;
  left: 652px;
  width: 235px;
  height: 23px;
}

.statusdom444 {
  position: absolute;
  top: 181px;
  left: 819px;
  width: 235px;
  height: 23px;
}

.statusdom555 {
  position: absolute;
  top: 181px;
  left: 984px;
  width: 235px;
  height: 23px;
}

.statusdom1-2 {
  position: absolute;
  top: 87px;
  left: 691px;
  width: 278px;
  height: 40px;
}

.statusdom2-2 {
  position: absolute;
  top: 224px;
  left: 691px;
  width: 278px;
  height: 40px;
}

.statusdom3-2 {
  position: absolute;
  top: 357px;
  left: 691px;
  width: 278px;
  height: 40px;
}

.statusdomlist {
  position: relative;
  width: 100%;
  height: 20px;
  font-size: 11px;
}

.statusdomlistimg {
  position: absolute;
  top: -4px;
  left: 51px;
  width: 51px;
  height: 26px;
}

.statusdomlistp1 {
  position: absolute;
  top: 0;
  left: 67px;
}

.statusdomlistp2 {
  position: absolute;
  top: 0;
  left: 123px;
}

.statusdomlistp3 {
  position: absolute;
  top: -1px;
  left: 189px;
  font-size: 14px;
}

.statusdomlistcolor1 {
  color: black;
}

.statusdomlistcolor2 {
  color: #f00;
}

.statusdomliststatuscolor1 {
  color: #00a842;
}

.statusdomliststatuscolor2 {
  color: #f00;
}

.statusdomlistspan {
  display: inline-block;
}

.roname {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
}

.name1 {
  top: 125px;
  left: 739px;
}

.name2 {
  top: 238px;
  left: 739px;
}

.name3 {
  top: 341px;
  left: 1143px;
}

.name11 {
  top: 128px;
  left: 729px;
}

.name22 {
  top: 355px;
  left: 859px;
}

.name33 {
  top: 355px;
  left: 1119px;
}

.name111 {
  top: 128px;
  left: 729px;
}

.name222 {
  top: 377px;
  left: 907px;
}

.name4 {
  top: 119px;
  left: 766px;
}

.name5 {
  top: 256px;
  left: 766px;
}

.name6 {
  top: 391px;
  left: 766px;
}

.tableWrapper {
  padding: 16px 24px;
  margin-top: 16px;
  background: white;
}

.operations {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  margin-bottom: 16px;
}

.progressWrapper {
  display: flex;
  width: 100%;
}

.progressWrapper span {
  margin-right: 8px;
}

.progress {
  flex: 1;
  margin-right: 8px;
  font-size: 12px;
}

.status {
  &__success {
    color: #10b981;
  }

  &__outdated {
    color: #ff9700;
  }

  &__invalid {
    color: #ef4444;
  }
}

.label {
  &__success {
    color: #333;
  }

  &__outdated {
    color: #ef4444;
  }

  &__invalid {
    color: #ef4444;
  }
}

.tableOperations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  &__item {
    cursor: pointer;
  }
}

.content-icon {
  height: 100%;
  cursor: pointer;
}

.spcWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &__header {
    display: flex;
    justify-content: space-between;
    height: 56px;
  }

  &__content {
    flex: 1;
  }
}

.draggable {
  cursor: grab;
  user-select: none;
  transition: transform 0.2s ease; /* 添加平滑过渡效果 */
  will-change: transform; /* 优化性能 */
}

.draggable:active {
  cursor: grabbing;
}

.rotitle {
  position: absolute;
  width: 60px;
  font-size: 14px;
  text-align: center;
}

.title1 {
  top: 77px;
  left: 2px;
}

.title2 {
  top: 122px;
  left: 1471px;
}

.titlep {
  font-size: 14px;
}

:deep(.px-progress--text-inside-ten .px-progress-bar__innerText) {
  margin: 0 -40px !important;
}

:deep(.px-progress__text) {
  font-size: 13px !important;
}
</style>
